<template>
  <div id="orders" :class="styleTypeClass" :style="{width:width,height:'100%'}">
    <!-- 默认样式-->
    <template>
<!--      <div class="title">-->
<!--        <div class="d-flex pt-2 pl-2">-->
<!--          <span class="title-icon"></span>-->
<!--          <span class="fs-xl text mx-2">订单统计</span>-->
<!--        </div>-->
<!--      </div>-->
      <div class="mt-3" style="height:95%">
        <EchartsIndex :options="options"/>
      </div>
    </template>
  </div>
</template>

<script>
import mixin from '../mixin/index'
import mixinEcharts  from '../mixin/echarts'
export default {
  name: "Orders",
  mixins: [mixin,mixinEcharts],
  components: {},
  data(){
    return {
      options:{
        tooltip: {
          trigger: 'item'
        },
        //饼图 位置
        grid:{
          top:50,
          bottom:20,
          left:55,
          right:20
        },
        color: ['#FCB727','#FCB727', '#FCB727','#FCB727','#FCB727'],
        xAxis: {
          type: 'category',
          data: ['物业费订单', '报修', '商家服务', '充电桩'],
          axisLabel:{
            interval:0,//横轴全部显示
            // rotate:-50,
            textStyle: {
              color: '#00FFFF',  //更改坐标轴文字颜色
            }
          },
          axisLine:{
            lineStyle:{
              color:'#00FFFF',
              width:1,
            }
          }
        },
        yAxis: {
          type: 'value',
          axisLabel:{
            textStyle: {
              color: '#00FFFF',  //更改Y坐标轴文字颜色
            }
          },
          axisLine:{
            lineStyle:{
              color:'#00FFFF',
              width:1
            }
          }
        },
        series: [
          {
            data: this.orderData,
            type: 'bar',
            barWidth: 40,//宽度
          }
        ]
      }
    }
  },
  props:{
    orderData:{
      type:Array,
      default:()=>[0,0,0,0]
    }
  },
  computed:{},
  watch:{
    orderData() {
      console.log('charger_charts',this.orderData);
      this.options.series[0].data = this.orderData
    },
  },
}
</script>

<style lang="scss" scoped>
@import '@/styles/datav/infoPlatform.scss';
</style>
